<template>
    <div class="ccui-home-index approvalBody">
        <div class="ccui-app-container">
            <!-- 高级搜索 -->
            <div class="ccui-advanced-search-wrapper ccui-clearfix" v-if="searchBool">
                <el-search
                    :formProp="formData"
                    @search="search"
                    @change="change"
                    :isShow="true"
                    class="ccui-highsearch no-print"
                    @resetForm="resetForm"
                >
                    <tabsToggle :toggleBtn="toggleBtn" :totalAccount="page.totalNum" :isActive="isActive"
                                @toggleClick="toggleClick"/>
           
                    <template slot="search">
                        <el-input
                            v-model="formData.settlementName"
                            clearable
                            searchLabel="结算单名称"
                            placeholder="请输入结算单名称模糊查询"
                            @blur="handleTrim('settlementName')"
                        />
                    </template>
                    
                    <el-input
                        v-model="formData.settlementName"
                        clearable
                        searchLabel="结算单名称"
                        placeholder="请输入结算单名称模糊查询"
                        @blur="handleTrim('settlementName')"
                        slot="searchItem1"
                    />
                    
                    <el-input
                        v-model="formData.settlementCode"
                        clearable
                        searchLabel="结算单编号"
                        placeholder="请输入结算单编号模糊查询"
                        @blur="handleTrim('settlementCode')"
                        slot="searchItem2"
                    />
                    
                    <el-input
                        v-model="formData.reportInOrgName"
                        clearable
                        searchLabel="填报单位"
                        placeholder="请输入填报单位模糊查询"
                        slot="searchItem3"
                    />
                    
                    <el-input
                        v-model="formData.contractCode"
                        clearable
                        searchLabel="合同编号"
                        placeholder="请输入合同编号模糊查询"
                        @blur="handleTrim('contractCode')"
                        slot="searchItem4"
                    />
                    
                    <el-input
                        v-model="formData.formalContractCode"
                        clearable
                        searchLabel="合同正式编号"
                        placeholder="请输入合同正式编号模糊查询"
                        slot="searchItem5"
                    />
                    
                    <el-input
                        v-model="formData.currencyName"
                        clearable
                        searchLabel="合同名称"
                        placeholder="请输入合同名称模糊查询"
                        @blur="handleTrim('currencyName')"
                        slot="searchItem6"
                    />
                    
                    <el-input
                        v-model="formData.supplierName"
                        clearable
                        searchLabel="供应商"
                        placeholder="请输入供应商模糊查询"
                        @blur="handleTrim('supplierName')"
                        slot="searchItem7"
                    />
                    
                    <el-select
                        class="ccui-form-longInput"
                        v-model="formData.status"
                        searchLabel="审批状态"
                        placeholder="请选择审批状态查询"
                        slot="searchItem8"
                        v-if="isActive === 0"
                    >
                        <el-option
                            v-for="item in contractState"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                    
                    <el-select
                        class="ccui-form-longInput"
                        v-model="formData.businessBillTypes"
                        searchLabel="审批类型"
                        placeholder="请选择审批类型查询"
                        slot="searchItem9"
                    >
                        <el-option
                            v-for="item in searchState"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                        
                    </el-select>
    
                    <el-select
                        class="ccui-form-longInput"
                        v-model="formData.approvalStatus"
                        searchLabel="审批结果"
                        placeholder="请选择审批结果查询"
                        clearable
                        slot="searchItem10"
                        v-if="isActive === 2"
                    >
                        <el-option
                            v-for="(item, index) in checkStateType"
                            :key="index + 'B'"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-search>
            </div>
            <!-- Table表格 -->
            <div class="ccui-multifunctional-table-wrapper">
                <Table :table-data="tableData" :table-thead-options="tableTheadOptions" :detailUrl="detailUrl">
                    <el-table-column label="操作" width="80" fixed="right" v-if="isActive === 1">
                        <template slot-scope="{ row }">
                            <el-button
                                size="mini"
                                type="text"
                                @click="handleGoApproval(row)"
                            >审批
                            </el-button>
                        </template>
                    </el-table-column>
                </Table>
                <div class="ccui-table-footer" v-show="tableData.length > 0">
                    <Pagination :page="page" @handlePageChange="handlePageChange"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import tabsToggle from "@/basa/components/public_practice/tabsToggle";
import Table from "@/basa/components/public_practice/Table";
import Pagination from "@/basa/components/public_practice/Pagination";
import listMixin from "@/app/settlement-management/equipment/mixins/listMixin";
import {getSettlementApproval} from "@/app/settlement-management/equipment/api";

export default {
    name: "all",
    components: {tabsToggle, Table, Pagination},
    mixins: [listMixin],
    data() {
        return {
            searchBool: true,
            contractState: [
                {label: "待审批", value: "0"},
                {label: "已审批", value: "1"}
            ],
            searchState: [
                {label: "结算录入", value: "S0305"},
                {label: "结算冲销", value: "S0306"},
            ],
            toggleBtn: [
                {
                    label: "全部",
                    status: "all"
                },
                {
                    label: "待审批",
                    status: "pending"
                },
                {
                    label: "已审批",
                    status: "approved"
                }
            ],
            tableTheadOptions: [
                {
                    type: "index",
                    label: "序号",
                    width: "50",
                    fixed: true
                },
                {
                    label: "结算单编号",
                    prop: "businessData.settlementCode",
                    width: "140",
                    checked: true,
                    fixed: true,
                    resizable: false
                },
                {
                    label: "审批类型",
                    prop: "todoData.businessBillTypeName",
                    width: "100"
                },
                {
                    label: "结算单名称",
                    prop: "businessData.settlementName",
                    width: "180"
                },
                {
                    label: "填报单位",
                    prop: "businessData.reportInOrgName",
                    width: "200"
                },
                {
                    label: "合同编号",
                    prop: "businessData.contractCode",
                    width: "150"
                },
                {
                    label: "合同正式编号",
                    prop: "businessData.formalContractCode",
                    width: "130"
                },
                {
                    label: "合同名称",
                    prop: "businessData.contractName",
                    width: "150"
                },
                {
                    label: "供应商",
                    prop: "businessData.supplierName",
                    width: "200"
                },
                {
                    label: "结算数量",
                    prop: "businessData.currSetCount",
                    width: "80"
                },
                {
                    label: "结算金额",
                    prop: "businessData.currSetMoneyString",
                    width: "100"
                },
                {
                    label: "编制人",
                    prop: "businessData.reportUsername",
                    // align: "right",
                    width: "80"
                },
                {
                    label: "编制日期",
                    prop: "businessData.createTime",
                    width: "100",
                    check: true,
                    // formatterName: "wirteTimeHandler"
                },
                {
                    label: "审批状态",
                    prop: "todoData.workItemStatusString",
                    width: "100"
                }
            ],
            isActive: 1,
            typeUrl: "pending",
            detailUrl: "/settlement-management/equipment-preserve/detail"
        }
    },
    methods: {
        // 获取数据
        getList(reqObj) {
            if (reqObj) {
                reqObj.businessBillTypes = reqObj.businessBillTypes ? [reqObj.businessBillTypes] : [];
            }
            let obj = {};
            let params = typeof reqObj === "object" ? reqObj : obj;
            obj.pageNo = this.page.pageNoCode;
            obj.pageSize = this.page.pageSizeCode;
            obj.isShowPageLoading = true;
            obj.isDelete = 0;
            obj.businessBillTypes = this.formData.businessBillTypes ? [this.formData.businessBillTypes] : [];
            getSettlementApproval(params, this.typeUrl).then(res => {
                let result = res.data.data;
                result.rows.forEach(item => {
                    item.businessData.currSetCount = item.businessData.currSetCount? (+item.businessData.currSetCount).toFixed(3) : "";
                    item.businessData.createTime = item.businessData.createTime? item.businessData.createTime.substr(0,10) : "";
                    if (item.todoData.businessBillTypeCode == "S0305") {
                        item.todoData.detailUrl = "/settlement-management/equipment-preserve/detail"
                    } else if (item.todoData.businessBillTypeCode == "S0306") {
                        item.todoData.detailUrl = "/settlement-management/equipment-writeOff/detail"
                    }
                });
                this.tableData = result.rows;
                this.page.totalNum = result.recordsTotal;
                this.page.pageNoCode = result.pageNo; // 当前页
            });
        },
        toggleClick(v, i) {
            this.isActive = i;
            this.typeUrl = v.status;
            this.formData = {};
            this.searchBool = false;
            this.$nextTick(() => {
                this.searchBool = true;
            });
            this.getList();
        },
            handleGoApproval(row) {
                const { businessData, todoData } = row;
                this.$store.dispatch("setBusinessList", todoData);
                const businessList = JSON.stringify(todoData);
                sessionStorage.setItem("businessList", businessList);
                const businessDataList = JSON.stringify(businessData);
                sessionStorage.setItem("businessDataList", businessDataList);
                if (row.todoData.businessBillTypeCode == "S0305") {
                    this.$router.push(
                        `/settlement-management/equipment-approval/todo/${businessData.id}`
                    );
                } else if (row.todoData.businessBillTypeCode == "S0306") {
                    this.$router.push(
                        `/settlement-management/equipment-approval/writeOff/${businessData.id}`
                    );
                }
            }
            
            
            
    },
    activated() {
        this.getList();
    }
}
</script>

<style scoped lang="scss">
.approvalBody {
    /deep/ .el-searchs {
        display: none;
    }
    
    /deep/ .el-search .icon-ccui-downdown {
        display: none;
    }
}
</style>